new Vue({
  el: '#learing-list',
  data: {
    categoryTreeNodes: [],
    categoryTreeNodeIndex: -1,
    childrenTreeNodeIndex: -1
  },
  computed: {
    childrenTreeNodes: function() {
      if (!this.categoryTreeNodes.length) {
        return []
      }
      let categoryTreeNodeIndex = this.categoryTreeNodeIndex

      if (categoryTreeNodeIndex === -1) {
        return this.categoryTreeNodes[0].childrenTreeNodes
      }
      return this.categoryTreeNodes[categoryTreeNodeIndex].childrenTreeNodes
    }
  },
  created: function() {
    category_tree_nodes().then(data => {
      this.categoryTreeNodes = data[0].categoryTreeNodes
    })
  },
  methods: {
    handleCategoryTreeNodeClick(index) {
      this.categoryTreeNodeIndex = index
      this.childrenTreeNodeIndex = -1
    },
    handleChildrenTreeNodeClick(index) {
      this.childrenTreeNodeIndex = index
    }
  }
})
